<template>
    <div class="shop">
        <el-button type="primary" style="margin:25px;" @click="addShop">新增商品信息</el-button>
        <div class="content" >
            <el-main>
                <el-table
                    border
                    :fit="true"
                    :data="tableData.slice((currentPage - 1) * pageSize,currentPage * pageSize)"
                >
                    <el-table-column
                        prop="_id"
                        label="序号"
                    ></el-table-column>
                    <el-table-column
                        prop="num"
                        label="商品编号"
                    ></el-table-column>
                    <el-table-column
                        prop="type"
                        label="商品类别"
                    ></el-table-column>
                    <el-table-column
                        prop="count"
                        label="商品数量"
                    ></el-table-column>
                    <el-table-column
                        prop="price"
                        label="商品价格"
                    ></el-table-column>
                    <el-table-column
                        prop="shop_name"
                        label="商品名称"
                    ></el-table-column>
                    <el-table-column
                        prop="stock"
                        label="商品库存"
                    ></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="primary"
                                @click="updShop(scope.row)"
                            >修改</el-button>
                            <el-button
                                size="mini"
                                type="danger"
                                @click="delShop(scope.row)"
                            >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pageNation
                    :total="tableData.length"
                    :page-size="pageSize"
                    @pageChange="pageChange"
                    :page_index="currentPage"
                />
            </el-main>
        </div>
        <ShopDialog
            :dialog="dialog"
            :ShopForm="ShopForm"
            @saveShop="getShop($event)"
        />
    </div>
</template>

<script>
import pageNation from "../../components/pagenation/pageNation";
import ShopDialog from "../../components/dialog/ShopDialog"
export default {
    name: "Shop",
    components: {pageNation,ShopDialog},
    data() {
        return {
            pageSize: 10,
            currentPage: 1,
            tableData: [],
            ShopForm:{
                _id:"",
                num:"",
                type:"",
                count:"",
                price:"",
                shop_name:"",
                stock:""
            },
            dialog: {
                show: false,
                title: "",
                option: "edit", //默认为编辑操作
            }
        };
    },
    mounted() {
       this.getShopMsg();
    },
    methods: {
        getShopMsg(){
            this.$http.get("/api/shop/findShopAll").then(res=>{
                if(res.data.code===200){
                    this.tableData=res.data.result;
                }else{
                    this.$message.error("没有对应数据");
                }
            })
        },
        //分页
        pageChange(item) {
            this.currentPage = item.page_index;
            this.pageSize = item.page_limit;
        },
        addShop(){
            this.dialog={
                show: true,
                title: "添加商品信息",
                option: "add", //默认为编辑操作
            };
            this.ShopForm._id="";
            this.ShopForm.num="";
            this.ShopForm.type="";
            this.ShopForm.count="";
            this.ShopForm.price="";
            this.ShopForm.shop_name="";
            this.ShopForm.stock="";
        },
        updShop(row){
             this.dialog={
                show: true,
                title: "编辑商品信息",
                option: "edit", //默认为编辑操作
            };
            this.ShopForm._id=row._id;
            this.ShopForm.num=row.num;
            this.ShopForm.type=row.type;
            this.ShopForm.count=row.count;
            this.ShopForm.price=row.price;
            this.ShopForm.shop_name=row.shop_name;
            this.ShopForm.stock=row.stock;
        },
        delShop(row){
             this.$confirm("确定禁用邮件吗?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }).then(() => {
                this.$http.post(`/api/shop/delShop/${row._id}`).then(res=>{
                    if(res.data.code===200){
                        this.$message.success("删除成功");
                        this.getShopMsg();
                    }else{
                        this.$message({type:"waning",message:"删除失败"});
                    }
                })
            })
            .catch(() => {
            return;
            });
        },
        getShop(shop){
            const url=this.dialog.option == "add" ? "addShop" : `updShop/${shop._id}`;
            this.$http.post(`/api/shop/${url}`,{
                num:shop.num,
                type:shop.type,
                count:shop.count,
                price:shop.price,
                shop_name:shop.shop_name,
                stock:shop.stock
            }).then(res=>{
                if(res.data.code===200){
                    this.$message.success("操作成功");
                    this.getShopMsg();
                }else{
                    this.$message({type:"warning",message:"操作失败"})
                }
            })
        }
    }
}
</script>

<style scoped lang="less">
    .shop{
        width:100%;
        height:91vh;
        background:#fff;
    }
</style>